<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/samePart.css" />
		<link rel="stylesheet" href="css/shop.css" />
		<link rel="stylesheet" href="css/goodsAndCustomer.css" />
		<link rel="stylesheet" href="css/aiMatch.css" />
		<script src="js/jquery-3.3.1.min.js"></script>
		
	</head>
	<body>
		<div class="background">
			<div class="content">
				<div class="left-content">
					<div class="left-up-content">
						<div class="titleBar">
							<div class="title">
								<img src="img/shop@2x.png" />
								<h1>店</h1>
								<span>-选择门店，圈定人货范围，按店开展营销&nbsp;</span>
							</div>
							<div class="shop-position"><img src="img/situation@2x.png" /><p>主要区域：广州</p></div>
							<div class="shop-switchButton tag"><p>圈选店人货</p><img src="img/switch@2x.png" /></div>
						</div>
						<div class="shop-infoBar">
							<div class="info">
								<div><p>已选门店</p><span>23</span></div>
								<div><p>活跃会员数</p><span>232,300</span></div>
								<div><p>平均月销售额</p><span>222,423</span></div>
								<div><p>平均售罄率</p><span>45%</span></div>
								<div><p>客单价</p><span>34,544</span></div>
							</div>
							<div class="shop-importButton button"><p>导入门店</p></div>
						</div>
					</div>
					<div class="arrow"><img src="img/arrow@2x.png" style="left: 30%;" /></div>
					<div class="left-down-content">
						<div class="goods">
							<div class="titleBar">
								<div class="title">
									<img src="img/goods@2x.png" />
									<h1>货</h1>
									<span>-限定卖货范围&nbsp;</span>
								</div>
							</div>
							<div class="selectBox">
								<div><p>选择商品分组</p></div>
								<div>
									<select>
										<option selected>2023年春夏款库存充足</option>
										<option>2023年秋冬款库存充足</option>
										<option>2024年春夏款库存充足</option>
									</select>
								</div>
								<div><img src="img/double arrow@3x.png" /></div>
							</div>
							<div class="info">
								<div class="infoContent">
									<div><p>款数</p><span>834</span></div>
									<div><p>主要商品</p><span>T恤</span></div>
								</div>
								<div class="infoContent">
									<div><p>库存</p><span>29,234</span></div>
									<div><p>价格带</p><span>￥1,000-3,000</span></div>
								</div>
								<div class="infoContent">
									<div><p>库龄</p><span>3年</span></div>
									<div><p>折扣率</p><span>56%</span></div>
								</div>
								<div class="infoContent">
									<div><p>售罄率</p><span>60%</span></div>
									<div><p>销售状态</p><span>畅销</span></div>
								</div>
							</div>
							<div class="goods-detailButton button"><p>商品明细</p></div>
						</div>
						<div class="separate"><img src="img/exchange@3x.png" /><div class="separateLine"></div></div>
						<div class="customer">
							<div class="titleBar">
								<div class="title">
									<img src="img/human@3x.png" />
									<h1>人</h1>
									<span>-明确营销对象&nbsp;</span>
								</div>
							</div>
							<div class="customer-aiSelect"><img src="img/image.png@3x.png"/><p>点击右方匹配按钮，立即生成方案~</p></div>
							<div class="selectBox">
								<div><p>选择会员分组</p></div>
								<div>
									<select>
										<option selected>2月正价核心会员群</option>
										<option>2月半价核心会员群</option>
										<option>2月低价核心会员群</option>
									</select>
								</div>
								<div><img src="img/double arrow@3x.png" /></div>
							</div>
							<div class="info">
								<div class="infoContent">
									<div><p>分组会员</p><span>9,213</span></div>
									<div><p>复购率</p><span>12%</span></div>
								</div>
								<div class="infoContent">
									<div><p>开卡率</p><span>34%</span></div>
									<div><p>RFM</p><span>重要发展</span></div>
								</div>
								<div class="infoContent">
									<div><p>主类型</p><span>老会员</span></div>
									<div><p>平均折扣</p><span>87%</span></div>
								</div>
								<div class="infoContent">
									<div><p>年龄段</p><span>30-50</span></div>
									<div><p>客单价</p><span>￥1213.9</span></div>
								</div>
							</div>
							<div class="customer-ButtonBar">
								<div class="customer-insightsButton button"><p>指标洞察</p></div>
								<div class="customer-analysisButton button"><p>会员分析</p></div>
							</div>
						</div>
						<div class="chooseBar">
							<div><input type="radio" value="AI" name="choose" id="choose1"/><label for="choose1">AI选</label></div>
							<div><input type="radio" value="optional" name="choose" id="choose2" checked/><label for="choose2">自选</label></div>
						</div>
					</div>
				</div>
				<div class="match"><img src="img/1@3x.png"/></div>
				<div class="right-content">
					<div class="right-up-content">
						<div class="titleBar">
							<div class="title">
								<img src="img/aiIcon@3x.png" style="width: 40px; height: 40px;" />
								<h1>AI匹配</h1>
								<span>-智能生成匹配方案&nbsp;</span>
							</div>
							<div class="ai-recommend tag"><p>按店推荐</p></div>
						</div>
						<div class="aiMatch"><p>请选择AI选择后点击匹配按钮</p></div>
						<div class="algorithm">
							<img src="img/check@3x.png" />
							<p>已使用ICF算法为23家门店生成人货匹配方案</p>
							<div>
								<select class="algorithmChange">
									<option>更换算法</option>
								</select>
							</div>
						</div>
						<div class="recommend">
							<div class="recommend-goods">
								<div class="recommend-title"><img src="img/check@3x.png" /><h2>推荐38款商品(1,344件库存)</h2></div>
								<div class="recommend-item"><p>畅销</p><div style="width: 120px;"></div><span>12款</span></div>
								<div class="recommend-item"><p>滞销</p><div style="width: 50px;"></div><span>5款</span></div>
								<div class="recommend-item"><p>平销</p><div style="width: 150px;"></div><span>15款</span></div>
							</div>
							<div class="recommend-customer">
								<div class="recommend-title"><h2>推荐6,921人</h2></div>
								<div class="recommend-item"><p>重要价值</p><div style="width: 150px;"></div><span>2,000人</span></div>
								<div class="recommend-item"><p>重要挽留</p><div style="width: 90px;"></div><span>1,300人</span></div>
								<div class="recommend-item"><p>一般价值</p><div style="width: 125px;"></div><span>1,800人</span></div>
								<div class="recommend-item"><p>一般挽留</p><div style="width: 60px;"></div><span>821人</span></div>
							</div>
						</div>
						<div class="recommend-Detail button"><p>查看方案明细</p><img src="img/arrow1@3x.png" /></div>
					</div>
					<div class="arrow"><img src="img/arrow@2x.png" style="right: 18%;" /></div>
					<div class="right-down-content">
						<div class="place">
							<div class="titleBar">
								<div class="title">
									<img src="img/place@3x.png" />
									<h1>场</h1>
									<span>-营销活动配置&nbsp;</span>
								</div>
								<div class="ai-recommend tag"><p>精准营销</p></div>
							</div>
							<div class="tabBar">
								<div class="tab">
									<div class="tab-item tab-active"><p>活动</p></div>
									<div class="tab-item"><p>互动</p></div>
									<div class="tab-item"><p>内容</p></div>
								</div>
							</div>
							<div class="tab-content">
								<div>
									<div><img src="img/priority@3x.png" /><p>权益</p></div>
									<div class="tab-content-active"><img src="img/coupon@3x.png" /><p>优惠券</p></div>
									<div><img src="img/on discount@3x.png" /><p>促销</p></div>
									<div><img src="img/regular@3x.png" /><p>常态化</p></div>
									<div><img src="img/reality@3x.png" /><p>引流到店</p></div>
								</div>
							</div>
						</div>
						<div class="touch">
							<div class="titleBar">
								<div class="title">
									<img src="img/get in touch@3x.png" />
									<h1>触达</h1>
									<span>-多点触达提高转化率&nbsp;</span>
								</div>
							</div>
							<div class="tab-content">
								<div>
									<div class="tab-content-active"><img src="img/works duty@3x.png" /><p>导购任务</p></div>
									<div><img src="img/group sending@3x.png" /><p>企微群发</p></div>
									<div><img src="img/Booking info@3x.png" /><p>订阅消息</p></div>
									<div><img src="img/message@3x.png" /><p>短信</p></div>
									<div><img src="img/touching automatically@3x.png" /><p>智能触达</p></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/index.js"></script>
</html>